<div
  class="typeahead"
  ng-keydown="typeahead.onKeyDown($event)"
  ng-keypress="typeahead.onKeyPress($event)"
>
  <ng-transclude></ng-transclude>
  <div
    class="typeahead-popover"
    ng-show="typeahead.isVisible()"
    ng-mouseenter="typeahead.onMouseEnter()"
    ng-mouseleave="typeahead.onMouseLeave()"
  >
    <div
      class="typeahead-items"
      kbn-scroll-bottom="typeahead.increaseLimit()"
    >
      <div
        class="typeahead-item"
        ng-repeat="item in typeahead.items | limitTo: typeahead.limit"
        ng-class="{active: $index === typeahead.selectedIndex}"
        ng-click="typeahead.onItemClick()"
        ng-mouseenter="typeahead.selectedIndex = $index"
      >
        <kbn-typeahead-item
          item="item"
          template="typeahead.itemTemplate"
        >
        </kbn-typeahead-item>
      </div>
    </div>
  </div>
</div>
